<template>
  <div>
    <div class="nav">
      <van-nav-bar
        title="主题设置"
        @click-left="onClickLeft"
        left-text="返回"
        left-arrow
      >
      </van-nav-bar>
    </div>

    <div class="main">
      <div class="swipe">
        <van-swipe :autoplay="3000" :height="122">
          <van-swipe-item v-for="(image, index) in images" :key="index">
            <img v-lazy="image" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="item">
        <div class="item_title">渐变气泡</div>
        <van-grid :column-num="3" :border="false" :gutter="5">
          <van-grid-item v-for="item in bubbleList" :key="item.Bubbleid">
            <van-image
              @click="overlayShow(item)"
              class="list_img"
              :src="BubbleUrl + item.BubbleUrl"
            />
            <span class="list_title">{{ item.BubbleName }}</span>
            <van-button @click="Dressup(item)" plain type="primary" size="small"
              >立即装扮</van-button
            >
          </van-grid-item>
        </van-grid>
      </div>
      <div class="centerban"></div>
      <div class="item">
        <div class="item_title">个性十足</div>
        <van-grid :column-num="3" :border="false" :gutter="5">
          <van-grid-item v-for="item in Personalitybubble" :key="item.Bubbleid">
            <van-image
              @click="overlayShow(item)"
              :src="BubbleUrl + item.BubbleUrl"
            />
            <span class="list_title">{{ item.BubbleName }}</span>
            <van-button @click="Dressup(item)" plain type="primary" size="small"
              >立即装扮</van-button
            >
          </van-grid-item>
        </van-grid>
      </div>
    </div>
    <van-overlay :show="show" @click="isshow">
      <div class="wrapper">
        <div class="block">
          <div class="left msg">
            <img
              src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/t.png"
              class="herdimg"
            />
            <div data-v-09b32b21="" class="nr">
              <div data-v-09b32b21="">
                <div
                  data-v-09b32b21=""
                  class="neir"
                  :style="{
                    backgroundImage:
                      'url(' +
                      (BubbleUrl + Bubble ? BubbleUrl + Bubble : '') +
                      ') !important',
                    backgroundSize: '100% 100%',
                    color: BubbleColor,
                  }"
                >
                  <p data-v-09b32b21="">{{ Bubblename }}这个气泡真好看！</p>
                </div>
              </div>
              <!---->
            </div>
          </div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>
<script>
import { mapState } from "vuex";

export default {
  data() {
    return {
      bubbleList: [],
      Personalitybubble: [],
      show: false,
      images: [
        "https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/Bubble/bubble-bg1.png",
        "https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/Bubble/bubble-bg2.png",
        "https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/Bubble/bubble-bg3.png",
        "https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/Bubble/bubble-bg4.png",
        "https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/Bubble/bubble-bg5.png",
        "https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/Bubble/bubble-bg6.png",
      ],
      Bubble: "",
      Bubblename: "",
      BubbleColor: "",
    };
  },
  created() {
    this.GetBubbles();
  },
  computed: {
    ...mapState(["emailLogin"]),
  },
  methods: {
    onClickLeft() {
      this.$router.push("/Message");
    },
    async GetBubbles() {
      const { data: res } = await this.$http.get("GetBubbles");
      this.bubbleList = res.data;
      this.Personalitybubble = res.data2;
      console.log(res);
    },
    overlayShow(item) {
      this.Bubble = item.BubbleUrl;
      this.Bubblename = item.BubbleName;
      this.BubbleColor = item.Color;

      this.show = true;
    },
    Dressup(item) {
      let data = {
        Bubble: item.BubbleUrl,
        bubbleColor: item.Color,
        id: this.emailLogin[0].userID,
        bubbleType: item.type,
      };
      this.$toast.loading({
        message: "设置中...",
        forbidClick: true,
      });
      setTimeout(() => {
        this.DressupSubmit(data);
      }, 1200);
    },
    async DressupSubmit(data) {
      const { data: res } = await this.$http.post("SetBubbles", data);
      console.log(res);
      if (res.status === 200) {
        this.$toast.success("设置成功");
      }
    },
    isshow() {
      this.show = false;
    },
  },
};
</script>
<style lang="less" scoped>
.nav {
  position: fixed;
  left: 0;
  width: 100%;
  z-index: 1200;
}
.main {
  padding: 50px 0px 0px;
  .item_title {
    font-size: 1.2rem;
    color: #464646;
    margin: 5px 9px 5px;
  }
  .list_title {
    margin: 5px 0;
  }
  .list_img {
    width: 95px;
    height: 80px;
  }
  .centerban {
    width: 100%;
    background: url(https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/Bubble/bancent.png)
      no-repeat;
    background-size: 100% 100%;
    height: 100px;
  }
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 260px;
  height: 140px;
  background-color: #fff;
  border-radius: 15px;
}
.left {
  flex-direction: row;
}
.msg {
  display: flex;
  align-items: flex-end;
  padding: 50px 0;
}
.herdimg {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 18px;
  margin: 0 8px;
}
.neir {
  padding: 10px 10px;
  min-height: 20px;
  font-size: 14px;
  color: #ffffff;
  line-height: 20px;
  max-width: 200px;
  border-radius: 24px 24px 24px 0px;
}
</style>